<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('pages/user/index')"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="main-loading">
				<uv-loading-icon :show="!orderList.loading" :size="28" timing-function="linear"
					mode="circle"></uv-loading-icon>
			</view>
			<view class="tab-box">
				<view class="order-tabs-list">
					<view class="order-tabs" :class="{'active':item.id == orderTabs.current}"
						v-for="(item,index) in orderTabs.list" :key="item.id" @tap.stop.prevent="onOrderTab(item.id )">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="order-list" v-if="orderList.list.length > 0">
				<navigator class="order-item" v-for="(item,index) in orderList.list" :key="item.orderId"
					:url="'/page_sharing/order/details?id='+ item.orderId + '&status=' + tabs.current + '&isT=1'">
					<view class="order-info">
						<view class="order-name" @tap.stop.prevent="clickHead(item)">
							<image class="user-avatar" :src="item.receiveUserAvatar"></image>
							<view class="name">{{item.receiveUserNickName}}</view>
						</view>
						<view class="order-status"
							:class="item.orderStatus == 0 ? 'all':item.orderStatus == 1 ? 'await':item.orderStatus == 2 ? 'underway':item.orderStatus == 3 ? 'complet':'cancel'">
							{{orderStatus(item.orderStatus,'content')}}
						</view>
					</view>
					<view class="order-details">
						<image class="order-image"
							:src="item.intro.coverPictureUrl ? item.intro.coverPictureUrl : item.intro.fileUrl" mode="aspectFill"></image>
						<view class="order-details-info">
							<view class="order-category">{{item.categoryName}}</view>
							<view class="order-time">碰头时间：{{item.pengStartTime}}</view>
							<view class="order-address onelist-hidden">碰头地址：{{item.address}}</view>
						</view>
						<!-- <view class="money">￥{{item.actualPrice}}</view> -->

					</view>
					<view class="appraise-btn">
						<view class="money">合计：<text class="pirce">￥{{item.actualPrice}}</text></view>
						<view class="btn-box">
<!-- 							<button v-if="item.orderStatus != 0 && item.orderStatus != -1"
								class="btn-primary btn-appraise btn-custom"
								@tap.stop.prevent="contactHim(item.receiveUserId)">联系对方</button> -->
							<!-- <button v-if="item.orderStatus == 3 && item.commentState == 1" class="btn-primary btn-appraise" @tap.stop.prevent="onAppraise(item)">确认接单</button> -->
							<button v-if="item.orderStatus == 3 && item.commentState == 1"
								class="btn-primary btn-appraise" @tap.stop.prevent="onAppraise(item)">评价并分享</button>
						</view>
					</view>
				</navigator>
			</view>
			<view v-show="orderList.loading && orderList.list.length <= 0">
				<empty
					:image="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/empty-order.png'"
					fixed>
					暂时没有订单，去PENG起来吧
				</empty>
			</view>
			<view v-show="load.loading">
				<uv-load-more :status="load.status" :loading-text="load.loadingText" :nomore-text="load.nomoreText"
					:line="load.status == 'nomore'" />
			</view>
		</view>
		<survey-pop></survey-pop>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			tabbar,
		},
		data() {
			return {
				tabbarCurrent: 2, //当前索引
				tabBar: app.globalData.tabBar,
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true, //加载框
				pageTitle: '我的下单', //标题
				orderList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				tabs: {
					list: [{
						id: 'place',
						name: '我的下单',
					}, {
						id: 'receiv',
						name: '我的接单',
					}],
					current: 'place'
				},
				orderTabs: {
					list: [{
						id: 'all',
						name: '全部',
						data: 0,
					}, {
						id: 'await',
						name: '待接单',
						data: 1,
					}, {
						id: 'underway',
						name: '进行中',
						data: 2,
					}, {
						id: 'complete',
						name: '已完成',
						data: 3,
					}, {
						id: 'cancel',
						name: '已取消',
						data: -1,
					}],
					current: 'all'
				},
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.getPageData()
		},
		onShow: function() {
			app.globalData.tabBar[0].name = 'active-home'
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.orderList.page = 1
			this.getPageData()
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			if (this.orderList.hasMore && this.orderList.loading) {
				this.load.loading = true
				this.getPageData()
			}
		},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestPengList()]).then(() => {
					// this.skeletonShow = false;
					uni.stopPullDownRefresh();
				});
			},
			// 订单列表查询
			requestPengList() {
				return new Promise((resolve, reject) => {
					this.orderList.loading = false
					app._post_form(
						"/client/order/pages", {
							current: this.orderList.page,
							extra: {},
							model: {
								dataState: this.tabs.current == 'place' ? 0 : 1,
								orderState: this.orderTabs.current == 'all' ? 0 : this.orderTabs.current ==
									'await' ? 1 : this.orderTabs.current == 'underway' ? 2 : this.orderTabs
									.current == 'complete' ? 3 : -1
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.orderList;
							if (1 == page) {
								list.length = 0;
							}
							list = [...list, ...records];
							hasMore = total > list.length;
							this.orderList.list = list;
							this.orderList.hasMore = hasMore;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else if (list.length > 3) {
								this.load.loading = true
								this.load.status = 'nomore'
							} else {
								this.load.status = 'nomore'
							}
							this.orderList.page = page;
						}, null, () => {
							resolve();
							this.orderList.loading = true
						}
					);
				});
			},
			//订单状态
			orderStatus(value, status) {
				// 订单状态：0 全部 1 待接单 2进行中 3已完成 -1已取消
				switch (value) {
					case -1:
						if (status == 'class')
							return 'cancel'
						return '已取消'
					case 0:
						if (status == 'class')
							return 'all'
						return '全部'
					case 1:
						if (status == 'class')
							return 'await'
						return '待对方接单'
					case 2:
						if (status == 'class')
							return 'underway'
						return '进行中'
					case 3:
						if (status == 'class')
							return 'complet'
						return '已完成'
				}
			},
			onTab(id) {
				if (this.tabs.current != id) {
					this.load.loading = false
					this.orderList.page = 1
					this.orderList.list = []
					this.tabs.current = id
					this.orderTabs.current = 'all'
					this.orderTabs.list[1].name = id == 'place' ? '待接单' : '待我接单'
					this.requestPengList()
				}
			},
			onOrderTab(id) {
				if (this.orderTabs.current != id) {
					this.orderTabs.current = id
					this.load.loading = false
					this.orderList.page = 1
					this.orderList.list = []
					this.requestPengList()
				}
			},
			clickHead(item) {
				let id = item.receiveUserId
				app.navigationTo('page_sharing/accompany/details?id=' + id + '&from=1')
			},
			onAppraise(item) {
				uni.navigateTo({
					url: '/page_community/send/appraise?id=' + item.orderId
				})
			},
			contactHim(userId) {
				uni.navigateTo({
					url: "/page_chat/chat/chat?conversationID=C2C" + userId
				})
			},

			// 返回上一页
			// 返回上一页
			goBack: function(url) {
				if (url) {
					app.navigationTo(url);
				} else {
					app.beNavigateBack();
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #F6F8F7;
		box-sizing: border-box;
		min-height: 100vh;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}


		}

		.main {
			box-sizing: border-box;
			padding: 176rpx 0 66rpx;
			/* #ifdef H5 */
			padding-top: calc(176rpx - 88rpx);
			/* #endif */

			.main-loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
			}

			.tab-box {
				margin-bottom: 16rpx;

				.tabs-list {
					box-sizing: border-box;
					padding: 20rpx 0 20rpx 48rpx;
					background: #FFFFFF;
					width: 100%;
					display: flex;
					align-items: center;

					.tabs {
						font-size: 32rpx;
						font-weight: 900;
						color: #999999;
						line-height: 44rpx;
						margin-right: 28rpx;


						&.active {
							font-size: 36rpx;
							font-weight: 900;
							color: #222222;
							line-height: 44rpx;
							position: relative;
							// transition: all .3s;

							&::before {
								content: "";
								display: block;
								width: 48rpx;
								height: 48rpx;
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community//tab-active.png');
								background-size: 100%;
								position: absolute;
								right: -10rpx;
								bottom: -18rpx;
							}
						}
					}
				}

				.order-tabs-list {
					box-sizing: border-box;
					padding: 30rpx 48rpx;
					background: #FFFFFF;
					width: 100%;
					display: flex;
					align-items: center;

					.order-tabs {
						font-size: 30rpx;
						font-weight: 900;
						color: #999999;
						line-height: 44rpx;
						margin-right: 28rpx;

						&.active {
							font-size: 32rpx;
							font-weight: 900;
							color: #222222;
							line-height: 44rpx;
							position: relative;
							// transition: all .3s;
						}
					}
				}
			}

			.order-list {
				box-sizing: border-box;
				padding: 0 24rpx 0;

				.order-item {
					box-sizing: border-box;
					padding: 32rpx 24rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 20rpx;
					width: 100%;
					margin-bottom: 16rpx;

					.order-info {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-bottom: 24rpx;

						.order-name {
							font-size: 26rpx;
							font-weight: 400;
							color: #222222;
							line-height: 44rpx;
							display: flex;
							align-items: center;

							.user-avatar {
								width: 44rpx;
								height: 44rpx;
								margin-right: 8rpx;
								border-radius: 50%;
							}
						}

						.order-status {
							font-size: 28rpx;
							font-weight: 900;
							color: #FFBF12;
							line-height: 44rpx;
							flex-shrink: 0;

							&.cancel {
								color: #999999;
							}

							&.complet {
								color: #999999;
							}

							&.underway {
								color: #6D9E15;
							}
						}
					}

					.order-details {
						height: 100%;
						display: flex;

						.order-image {
							width: 164rpx;
							height: 164rpx;
							border-radius: 20rpx;
							margin-right: 12rpx;
							flex-shrink: 0;
						}

						.order-details-info {
							height: 164rpx;
							flex: 1;
							width: 0;
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.order-category {
								font-size: 30rpx;
								font-weight: 900;
								color: #222222;
								line-height: 44rpx;
							}

							.order-time {
								font-size: 26rpx;
								font-weight: 400;
								color: #666666;
								line-height: 44rpx;
							}

							.order-address {
								font-size: 26rpx;
								font-weight: 400;
								color: #666666;
								line-height: 44rpx;
							}
						}
					}



					.appraise-btn {
						margin-top: 31rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.money {
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;
							line-height: 44rpx;

							.pirce {
								font-size: 32rpx;
								font-weight: 900;
								color: #282D2D;
								line-height: 44rpx;
							}
						}

						.btn-box {
							.btn-appraise {
								padding: 11rpx 20rpx;
								background: #2B2F2B;
								border-radius: 20rpx;
								font-size: 28rpx;
								font-weight: 900;
								line-height: 37rpx;
								height: auto;
								width: auto;
								box-sizing: border-box;
								display: inline-block;
							}

							.btn-custom {
								border: 2rpx solid #7B867F;
								color: #999B9B;
								background: #FFFFFF;
								margin-right: 12rpx;
							}
						}
					}
				}
			}
		}
	}
</style>